<template>
    <div class="h-between-center f14 location" style="color: #606266">
        <div class="h-start-center">
            <div class="pr10 pl10 center">
                <i class="el-icon-location-outline f16"></i>
            </div>
            <div class="details">{{ addressDetails }}</div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
let me
export default {
    name: 'location',
    data() {
        return {
            address: '',
            addressDetails: '',
            loading: false,
        }
    },
    computed: {
        disabled() {
            return this.$attrs.disabled
        },
    },
    mounted() {
        me = this
        this.address = this.$vnode.data.props.value
        this.getDetails()
    },
    methods: {
        async getDetails() {
            let location = {}
            try {
                location = JSON.parse(this.address)
            } catch (e) {
                console.log(e)
            }

            if (location && location.longitude && location.latitude) {
                this.loading = true
                try {
                    let data = {
                        key: '1d959f77f808a9d448e536e3494e6a78',
                        location: location.longitude + ',' + location.latitude,
                    }
                    let res = await axios({
                        method: 'get',
                        url: 'https://restapi.amap.com/v3/geocode/regeo',
                        params: data,
                    })
                    if (res.status == 200 && res.data.status == 1) {
                        this.addressDetails = res.data.regeocode.formatted_address
                    }
                } catch (e) {}
                this.loading = false
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.location {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    padding: 6px 0;
    .details {
        line-height: 22px;
    }
}
.h-start-center {
    display: flex;
}
</style>
